import {
  Outlet,
  NavLink,
  useLoaderData,
  Form,//这个Form可以触发页面无刷新提交，组件进行了一遍更新
  redirect,
  useNavigation,
  useSubmit,
} from "react-router-dom";
import { getContacts, createContact } from "../contacts";
import { useEffect } from "react";

// 导出一个加载器
export async function loader({ request }) {
  const url = new URL(request.url);
  const q = url.searchParams.get("q");
  const contacts = await getContacts(q);  
  return { contacts, q };
}

// GET方法提交的Form表单不会触发action
export async function action() {
  const contact = await createContact();
  // 这里重定向到编辑界面
  return redirect(`/contacts/${contact.id}/edit`);
}

export default function Root() {
  // 当路由到这个界面会先加载外面的那个loader，再是加载这个组件里面的东西
  const { contacts, q } = useLoaderData();
  // useNavigation 返回当前导航状态：它可以是 之一。"idle" | "submitting" | "loading"
  const navigation = useNavigation();
  // 我们在这里要做出一个产品决定。对于此 UI，我们可能更愿意在每次击键时进行过滤，而不是在显式提交表单时进行过滤。
  const submit = useSubmit();

  const searching =
    navigation.location &&
    new URLSearchParams(navigation.location.search).has(
      "q"
    );

  useEffect(() => {
    document.getElementById("q").value = q;
  }, [q]);

  return (
    <>
      <div id="sidebar">
        {/* 上面设置的是Flex布局，垂直的，h1 order设为了1，往后面排 */}
        <h1>React Router Contacts</h1>
        <div>
          <Form id="search-form" role="search">
            <input
              id="q"
              /* @@@调节样式 */
              className={searching ? "loading" : ""}
              aria-label="Search contacts"
              placeholder="Search"
              type="search"
              name="q"
              defaultValue={q}
              /* 当您输入时，表单会自动提交！ */
              onChange={(event) => {
                const isFirstSearch = q == null;
                // 如果是查询就替换历史栈                
                submit(event.currentTarget.form, {
                  replace: !isFirstSearch,
                });
              }}
            />
            {/* @@@调节样式！！！ */}
            <div id="search-spinner" aria-hidden hidden={!searching} />
            <div className="sr-only" aria-live="polite"></div>
          </Form>
          {/* 注意这个格式：post的话，需要action，但是这里默认本路由 */}
          <Form method="post">
            <button type="submit">New</button>
          </Form>
        </div>
        <nav>
          {contacts.length ? (
            <ul>
              {contacts.map((contact) => (
                <li key={contact.id}>
                  <NavLink
                    to={`contacts/${contact.id}`}
                    /* 注意下面的参数是React-Router自带的！！ */
                    className={({ isActive, isPending }) =>
                      isActive ? "active" : isPending ? "pending" : ""
                    }
                  >
                    {contact.first || contact.last ? (
                      <>
                        {contact.first} {contact.last}
                      </>
                    ) : (
                      <i>No Name</i>
                    )}{" "}
                    {contact.favorite && <span>★</span>}
                  </NavLink>
                </li>
              ))}
            </ul>
          ) : (
            <p>
              <i>No contacts</i>
            </p>
          )}
        </nav>
      </div>
      <div
        id="detail"
        /* 这里用到了useNavigation */
        className={navigation.state === "loading" ? "loading" : ""}
      >
        <Outlet />
      </div>
    </>
  );
}
